<template>
	<view class="container">
		<view class="LotteryDraw">
			<view class="rotate" :style="{transform:rotateZ}">
				<image class="image" :src="baseImageUrl+'/choujiang/round.png'"></image>
			</view>
			<view class="start" :style=" {background:pointerUrl}" @click="$noMultipleClicks(getLotteryDraw)">
				<view class="text" v-html="title">
					开始<br>抽奖
				</view>
				<image class="image"  :src="baseImageUrl+'/choujiang/Start.png'"></image>
			</view>
		</view>
		<!-- <view class="prizeDes padding-left-20" v-for="(item,index) in prizeList" :key="index">
			<view class="prize-left" style="">{{prizeList[0].PrizeName}}</view>
			<view class="padding-left-20">{{prizeList[0].PrizeDesc}}</view>
		</view> -->
		<view class="prizeDes padding-left-20" style="margin-top: 20px;">
			<view class="prize-left" style="background-color: #E02020;">{{prizeList[0].PrizeName}}</view>
			<view class="padding-left-20  font-weight-border" >{{prizeList[0].PrizeDesc}}</view>
		</view>
		<view class="prizeDes padding-left-20">
			<view class="prize-left" style="background-color: #FA6400">{{prizeList[1].PrizeName}}</view>
			<view class="padding-left-20 font-weight-border" >{{prizeList[1].PrizeDesc}}</view>
		</view>
		<view class="prizeDes padding-left-20">
			<view class="prize-left" style="background-color: #F7B500">{{prizeList[2].PrizeName}}</view>
			<view class="padding-left-20 font-weight-border">{{prizeList[2].PrizeDesc}}</view>
		</view>
		<view class="prizeDes padding-left-20">
			<view class="prize-left" style="background-color: #6DD400">{{prizeList[3].PrizeName}}</view>
			<view class="padding-left-20 font-weight-border">{{prizeList[3].PrizeDesc}}</view>
		</view>
		<view class="prizeDes padding-left-20">
			<view class="prize-left" style="background-color: #44D7B6">{{prizeList[4].PrizeName}}</view>
			<view class="padding-left-20 font-weight-border">{{prizeList[4].PrizeDesc}}</view>
		</view>
		<view class="prizeDes padding-left-20">
			<view class="prize-left" style="background-color: #32C5FF">{{prizeList[5].PrizeName}}</view>
			<view class="padding-left-20 font-weight-border">{{prizeList[5].PrizeDesc}}</view>
		</view>
	</view>
</template>

<script>
	import { baseImageUrl } from '@/config/config.js'
	import {
		successToShow,
		errorToShow
	} from '@/config/common.js'
	import {
		getWechatPrizeList,
		customerRaffle
	} from '@/constant/customer.js'
	export default {
		components: {
		},
		data() {
			return {
				Id:'',
				CustomerId: uni.getStorageSync('customerId'),
				baseImageUrl:baseImageUrl,
				resultPrize: 0,
				prizeList : [],
				title: '开始<br>抽奖',
				rotateZ: "",
				url: "",
				pointerUrl: "",
				deg: 60
			}
		},
		created() {
			this.getPrizeList()
		},
		onLoad(options) {
			if(options.Id){
				this.Id = options.Id
			}
		},
		methods: {
			async getPrizeList(){ 
				let result = await getWechatPrizeList();
				if(result.length > 6){
					this.prizeList = result.splice(0,5);
				}else{
					this.prizeList = result;
				}
			},
			async getLotteryDraw() {
				let result = await customerRaffle({Id:this.Id,CustomerId:this.CustomerId});
				this.lotteryDraw(result);
			},
			//图片转动
			lotteryDraw(prizeResult) {
				let deg = this.deg;  //旋转的默认角度360/6
				let numdeg = 0;
				numdeg += prizeResult.result_index * deg + Math.floor(Math.random() * 3 + 1) * 720; //记录上次旋转停止时候的角度
				//记录当前位置
				this.rotateZ = "rotateZ(" + -numdeg + "deg)"; //轮盘转动
				setTimeout(() => {
					successToShow('恭喜你,中奖了', res => {
						let cardExt = {
							timestamp: prizeResult.timestamp,
							nonce_str: prizeResult.nonce_str,
							signature: prizeResult.sign
						};
						wx.addCard({
							cardList: [{
								cardId: prizeResult.card_id,
								cardExt: JSON.stringify(cardExt)
							}],
							success: succ => {
								uni.redirectTo({
									url:'/pages/mine/myexchangema/index'
								})
							},
							fail: err => {
								uni.redirectTo({
									url:'/pages/mine/myexchangema/index'
								})
							}
						});
					})
				}, 2000)
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
	.container{
		height: 100vh;
		overflow-y: auto;
	}
	.prizeDes{
		width: 100vw;
		padding-top: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
	}
	.font-weight-border{
		font-weight: bold;
	}
	.prize-left{
		font-size: 30rpx;
		padding: 7px;
		color: #fff;
		border-radius: 5px;
	}
	.LotteryDraw {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		height: 700rpx;
		width: 700rpx;
		position: relative;

		.rotate {
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			height: 100%;
			background-size: 100%;
			position: relative;
			transform: rotateZ(360deg);
			transform-origin: center left bottom;
			-webkit-transform-origin: center left bottom;
			transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);

			.image {
				height: 700rpx;
				width: 700rpx;
			}
		}

		.start {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 200rpx;
			height: 200rpx;
			padding-top: 70rpx;
			text-align: center;
			font-weight: bold;
			cursor: pointer;
			color: #fff;
			background-size: 100% !important;
			transform: translate(-50%, -50%) rotateZ(360deg);
			transform-origin: center left bottom;
			-webkit-transform-origin: center left bottom;
			transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);

			/* background:url("../../static/components/Start.png") no-repeat;*/
			.image {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
				width: 220rpx;
				height: 220rpx;
				margin: 0 auto;
			}

			.text {
				position: absolute;
				top: 82rpx;
				left: 10rpx;
				z-index: 1000;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				font-size: 32rpx;
			}
		}
	}
	.image{
		width: 100rpx;
		height: 100rpx;
	}
	.padding-left-20{
		padding-left: 20rpx;
	}
</style>